<template>
    <div>
        <a-modal width="90%" :visible="visible" :title="null" @cancel="closeModal" class="large-modal left3Child-modal"
            :getContainer="getParent" :footer="null" :dialog-style="{ top: '0' }">
            <a-spin tip="Loading..." :spinning="loading">
                <div style="position:relative">
                    <div class="child-title">
                        <span class="child-title-words">每日就诊</span>
                    </div>
                    <div class="child-type">
                        <div class="type-list" :class="pageType==='中医馆'&&'type-active'" @click="typeChage('中医馆')">中医馆</div>
                        <div class="type-list" :class="pageType==='社区医院'&&'type-active'" @click="typeChage('社区医院')">社区医院</div>
                        <div class="type-list" :class="pageType==='体检中心'&&'type-active'" @click="typeChage('体检中心')">体检中心</div>
                        <div class="type-list" :class="pageType==='口腔门诊'&&'type-active'" @click="typeChage('口腔门诊')">口腔门诊</div>
                        <div class="type-list" :class="pageType==='养老中心'&&'type-active'" @click="typeChage('养老中心')">养老中心</div>
                    </div>
                    <div class="data-select-parent" style="position:relative">
                        <!-- <span class="date-picker-title">选择选择年份：</span> -->
                        <a-select class="large-select" v-model="agencyId" placeholder="暂无数据" @change="agencyChange">
                            <a-select-option :value="item.id" v-for="item in agencyList" :key="item.id">{{item.name}}</a-select-option>
                        </a-select>

                        <div class="user-count">
                            <div class="child-content-title">
                                <img class="child-content-titleico" src="@/assets/large/panel-title-ico.png" />
                                就诊人数
                            </div>

                            <div class="num-box">
                                <div class="num-list" v-for="(item,idx) in numList" :key="'num_'+idx">
                                    <img class="num-list-bg" src="@/assets/large/left2-numbg.png" v-if="item!==','" />
                                    <div class="num-list-word">{{item}}</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="page-content">
                        <div class="content-left">
                            <div style="padding:0 10px">
                                <a-input-search class="large-search" allowClear v-model="keywords" placeholder="患者姓名/就诊号"
                                    @search="searchPatientList" />
                            </div>

                            <div style="margin-top:10px;overflow:auto;height:calc(100vh - 300px)">
                                <div class="patient-list" :class="selPatient.id===item.id&&'patient-list-s'"
                                    v-for="(item,i) in patientList" @click="clickPatient(item)">
                                    <span>{{item.consultationNumber}}-</span>
                                    <span>{{item.patientName}}</span>
                                </div>
                                <div v-if="patientList.length===0" style="text-align:center;color:rgba(255,255,255,0.8)">暂无</div>
                            </div>
                        </div>
                        <div class="content-right">
                            <div class="content-mid">
                                <div class="child-content-title">
                                    <img class="child-content-titleico" src="@/assets/large/panel-title-ico.png" />
                                    患者信息
                                </div>
                                <div class="content-box">
                                    <div class="content-list">
                                        <span class="content-list-title">姓名：</span>
                                        <span class="content-list-info">{{selPatient.patientName}}</span>
                                    </div>
                                    <div class="content-list">
                                        <span class="content-list-title">性别：</span>
                                        <span class="content-list-info">{{selPatient.gender}}</span>
                                    </div>
                                    <div class="content-list">
                                        <span class="content-list-title">年龄：</span>
                                        <span class="content-list-info">{{selPatient.age}}</span>
                                    </div>
                                    <div class="content-list">
                                        <span class="content-list-title">血型：</span>
                                        <span class="content-list-info">{{selPatient.bloodType}}</span>
                                    </div>
                                    <div class="content-list">
                                        <span class="content-list-title">其他信息：</span>
                                        <span class="content-list-info">{{selPatient.diagnosisResult}}</span>
                                    </div>
                                </div>
                                <div class="child-content-title" style="margin-top:10px">
                                    <img class="child-content-titleico" src="@/assets/large/panel-title-ico.png" />
                                    消费记录
                                </div>
                                <div class="large-table" style="margin-top:15px">
                                    <a-table bordered :loading="loading" :rowKey="(item,i)=>'day_'+i" :columns="columns"
                                        :data-source="consumptionList" :pagination="false"
                                        :rowClassName="(record, index) => index % 2 === 0 ? 'even-row' : 'odd-row'"
                                        :scroll="{y: '40vh' }">

                                    </a-table>
                                </div>
                            </div>
                            <div style="display:flex;align-items: center;width:15%;flex-shrink:0">
                                <img class="model-img" src="@/assets/large/model.png" />
                            </div>

                            <div class="content-log">
                                <div class="child-content-title">
                                    <img class="child-content-titleico" src="@/assets/large/panel-title-ico.png" />
                                    历史就诊记录
                                </div>
                                <div class="log-main">
                                    <div class="log-left">
                                        <div class="patient-list" :class="selHistory.id===item.id&&'patient-list-s'"
                                            v-for="(item,i) in historyRecords" :key="item.id" @click="clickHistory(item)">
                                            {{$format(item.visitTime,'yyyy-MM-dd')}}
                                        </div>
                                    </div>
                                    <div class="log-right">
                                        <div class="log-top">
                                            <!-- <div class="log-img-box">
                                                <img class="log-img" src="@/assets/large/model.png" />
                                            </div> -->

                                            <div>
                                                <div class="content-list">
                                                    <span class="content-list-title">就诊医馆：</span>
                                                    <span class="content-list-info">{{organizationInfo.name}}</span>
                                                </div>
                                                <div class="content-list">
                                                    <span class="content-list-title">医馆类型：</span>
                                                    <span class="content-list-info">{{organizationInfo.institutionalType}}</span>
                                                </div>
                                                <!-- <div class="content-list">
                                                    <span class="content-list-title">主治医师：</span>
                                                    <span class="content-list-info">王武</span>
                                                </div> -->
                                                <div class="content-list">
                                                    <span class="content-list-title">科室：</span>
                                                    <span class="content-list-info">{{selHistory.department}}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div style="margin-top:10px">
                                            <div class="log-title">诊断结果</div>
                                            <div class="log-text">
                                                {{selHistory.diagnosisResult}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </a-spin>
            <template slot="footer">
                <div></div>
            </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import largeApi from "@/api/largeApi";
import { format } from "@/utils";
import { Component, Prop, Watch, Vue } from "vue-property-decorator";

@Component({
    name: "tpl",
    components: {},
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Watch("visible")
    visibleChange() {
        if (this.visible) {
        } else {
        }
    }
    loading = false;
    pageType = "中医馆";
    keywords = "";
    getParent() {
        return document.getElementById("largePage");
    }

    async mounted() {
        // 获取机构列表
        this.getPageData();
        //this.numList = this.getNumList(55687);
    }
    closeModal() {
        this.$emit("closeModal");
    }
    organizationInfo = {};
    agencyList: any[] = [];
    async getPageData() {
        this.loading = true;
        try {
            const res = await largeApi.getInstitutionsByType({
                institutionType: this.pageType,
            });
            this.agencyList = res.data;
            const agency = res.data[0] || {};
            this.agencyId = agency ? agency.id : undefined;
            this.organizationInfo = {
                name: agency.name,
                institutionalType: this.pageType,
            };
            await this.getAgencyData();
        } finally {
            this.loading = false;
        }
    }
    agencyChange() {
        const find = this.agencyList.find((item) => {
            return item.id === this.agencyId;
        });
        this.organizationInfo = {
            name: find.name,
            institutionalType: this.pageType,
        };
        this.getAgencyData();
    }
    patientList: any[] = [];
    patientAll: any[] = [];
    selPatient: any = {};
    historyRecords: any[] = [];
    selHistory = {};
    async getAgencyData() {
        this.loading = true;
        try {
            const res = await largeApi.getDailyPatientDetails({
                organizationId: this.agencyId,
            });
            const patientInfoList = res.data.patientInfoList;
            this.patientList = patientInfoList;
            this.patientAll = JSON.parse(JSON.stringify(patientInfoList));
            this.numList = this.getNumList(res.data.visitStats.totalVisits);
            this.selPatient = patientInfoList[0] || {};
            this.consumptionList = this.selPatient.consumptionRecords;
            this.historyRecords = this.selPatient.historyRecords || [];
            this.selHistory = this.historyRecords[0] || {};
        } finally {
            this.loading = false;
        }
    }
    clickPatient(item) {
        this.selPatient = item;
        this.consumptionList = this.selPatient.consumptionRecords;
        this.historyRecords = this.selPatient.historyRecords;
        this.selHistory = this.historyRecords[0] || {};
    }
    clickHistory(item) {
        this.selHistory = item;
    }
    searchPatientList() {
        if (this.keywords) {
            this.patientList = this.patientAll.filter((item) => {
                let str = item.patientName + "_" + item.consultationNumber;
                return str.indexOf(this.keywords) >= 0;
            });
        } else {
            this.patientList = JSON.parse(JSON.stringify(this.patientAll));
        }
        this.selPatient = this.patientList[0] || {};
        this.consumptionList = this.selPatient.consumptionRecords;
        this.historyRecords = this.selPatient.historyRecords;
        this.selHistory = this.historyRecords[0] || {};

    }

    numList: string[] = [];
    getNumList(num) {
        const str = Number(num).toLocaleString();
        return str.split("");
    }

    agencyId = "";
    typeChage(type: string) {
        this.pageType = type;
        this.getPageData();
    }

    pagination = {
        current: 1,
        pageSize: 10,
        total: 100,
        onChange: this.pageChange,
    };
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;
        this.getConsumptionList();
    }
    getConsumptionList() {}
    consumptionList: any[] = [];
    columns = [
        {
            align: "center",
            dataIndex: "visitTime",
            key: "visitTime",
            title: "消费时间",
            width: 150,
            customRender: (text: string, record: any, index: number) => {
                return format(record.visitTime);
            },
        },
        {
            align: "center",
            dataIndex: "source",
            key: "source",
            title: "项目",
        },
        {
            align: "center",
            dataIndex: "consumptionAmountYuan",
            key: "consumptionAmountYuan",
            title: "消费金额",
        },
        {
            align: "center",
            dataIndex: "payWay",
            key: "payWay",
            title: "支付方式",
        },
    ];
}
</script>
<style lang="scss">
.left3Child-modal {
    .ant-modal-body {
        max-height: calc(100vh - 50px);
    }
    .child-type {
        padding: 15px 0;
    }
    .type-list {
        width: 120px;
        height: 40px;
        background-size: 100%;
        background-image: url("@/assets/large/type.png");
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        cursor: pointer;
        margin-right: 15px;
    }
    .type-active {
        background-image: url("@/assets/large/type-s.png");
    }

    .page-content {
        display: flex;
        border: solid 1px rgba(58, 211, 193, 0.5);
        border-radius: 4px;
        margin-top: 15px;
        display: flex;
    }
    .content-left {
        display: inline-block;
        width: 20%;
        max-width: 200px;
        border-right: solid 1px rgba(58, 211, 193, 0.5);
        padding: 10px 0;
        flex-shrink: 0;
    }

    .content-right {
        flex-grow: 1;
        display: flex;
        justify-content: space-between;
        padding: 15px;
    }
    .patient-list {
        font-size: 14px;
        padding: 10px;
        color: #fff;
        border-top: solid 1px rgba(58, 211, 193, 0.2);
        cursor: pointer;
    }
    .patient-list:hover {
        background-color: rgba(58, 211, 193, 0.2);
    }
    .patient-list-s {
        background-color: rgba(58, 211, 193, 0.4);
    }

    .content-mid {
    }
    .content-log {
        width: 500px;
        flex-shrink: 0;
    }

    .content-box {
        padding: 10px 0;
        padding-left: 25px;
    }
    .content-list {
        padding: 2px;
        display: flex;
    }
    .content-list-title {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
        vertical-align: top;
        display: inline-block;
        flex-shrink: 0;
    }
    .content-list-info {
        font-size: 14px;
        color: rgba(255, 255, 255, 1);
        display: inline-block;
        vertical-align: top;
    }

    .model-img {
        width: 100%;
        margin: 0 15px;
    }
    .log-main {
        display: flex;
        padding: 10px 0;
    }
    .log-top {
        display: flex;
        align-items: center;
    }
    .log-left {
        width: 150px;
        border: solid 1px rgba(58, 211, 193, 0.2);
        flex-shrink: 0;
    }
    .log-right {
        padding: 0 10px;
    }
    .log-img-box {
        height: 160px;
        width: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .log-img {
        max-height: 160px;
        max-width: 120px;
    }
    .log-title {
        font-size: 16px;
        color: #3ad3c1;
    }
    .log-text {
        color: rgba(255, 255, 255, 0.8);
        font-size: 14px;
    }

    .user-count {
        position: absolute;
        right: 0;
        bottom: -10px;
    }

    .num-box {
        font-weight: bold;
        font-size: 18px;
        color: #fff;
        margin-top: 10px;
        padding-left: 20px;
    }
    .num-list {
        display: inline-block;
        position: relative;
        height: 30px;
        min-width: 10px;
        margin-right: 1px;
    }
    .num-list-bg {
        height: 110%;
        display: block;
    }
    .num-list-word {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 2px;
    }
}
</style>
